﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>绘制抛物线</title>
</head>
<body>
    1单位等于几像素
    <input id="_ctlEditPixelRate" value="10" />
    a:
    <input id="_ctlEditA" value="1"/>
    b:
    <input id="_ctlEditB" value="1"  />
    c:
    <input id="_ctlEditC" value="1"  />
    <button id="=_ctlBtnDraw" onclick="draw();">Draw</button>
    <div>
        <canvas id="_ctlCanvas" style="background-color:gray" width="800" height="600"></canvas>
    </div>
</body>
</html>
<script>
    var g_pixelRate = 0;
    function draw() {
        var oCanvas = document.getElementById("_ctlCanvas");
        var oContext = oCanvas.getContext("2d");
        oContext.clearRect(0, 0, 800, 600);
        //oContext.fillStyle = 'rgba(255,0,0,0)';//填充颜色：红色，半透明
        //oContext.strokeStyle = 'hsl(120,50%,50%)';//线条颜色：绿色
        //oContext.str
        g_pixelRate = parseFloat(document.getElementById('_ctlEditPixelRate').value);
        var a = parseFloat(document.getElementById('_ctlEditA').value);
        var b = parseFloat(document.getElementById('_ctlEditB').value);
        var c = parseFloat(document.getElementById('_ctlEditC').value);
        var lastPos = null;

        oContext.beginPath();

        oContext.moveTo(ctx(0), cty(0));
        oContext.lineTo(ctx(5), cty(0));
        oContext.stroke();//画线框

        oContext.moveTo(ctx(0), cty(1));
        oContext.lineTo(ctx(0), cty(0));
        oContext.stroke();//画线框

        for (var x = -2.0; x <= 5.0; x += 0.01) {
            var y = a * x * x + b * x + c;

            if (lastPos == null) {
                lastPos = { x: x, y: y };
            } else {
                oContext.moveTo(ctx(lastPos.x), cty(lastPos.y));
                oContext.lineTo(ctx(x), cty(y));
                lastPos.x = x;
                lastPos.y = y;
                oContext.stroke();//画线框
            }
        }
    }

    function ctx(ox) {
        return ox * g_pixelRate + 400.0;
    }
    function cty(oy) {
        return 300.0 - oy * g_pixelRate;
    }
</script>
